<template>
  <div class="home">
    <div class="common-layout">
      <el-container>
        <el-header>
          <h2 class="title">宠物服务管理系统</h2>
          <div class="fr">
            <p>用户：admin</p>
            <div class="out_login">退出登录</div>
          </div>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu router class="el-menu-vertical-demo">
              <el-menu-item index="/home">
                <el-icon>
                  <location />
                </el-icon>
                <span>首页</span>
              </el-menu-item>

              <el-menu-item index="merchant">
                <el-icon><icon-menu /></el-icon>
                <span>商家管理</span>
              </el-menu-item>

              <el-sub-menu index="1">
                <template #title>
                  <el-icon><icon-menu /></el-icon>
                  <span>商品管理</span>
                </template>
                <el-menu-item-group title="商品管理">
                  <el-menu-item index="1-1">宠物</el-menu-item>
                  <el-menu-item index="1-2">商品</el-menu-item>
                  <el-menu-item index="1-2">领养</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="2">
              <template #title>
                <el-icon><icon-menu /></el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item-group title="订单管理">
                <el-menu-item index="/order1">未支付订单</el-menu-item>
                <el-menu-item index="/order2">已支付订单</el-menu-item>
                <el-menu-item index="/order3">已发货订单</el-menu-item>
                <el-menu-item index="/order4">已完成订单</el-menu-item>
                <el-menu-item index="/order5">已取消订单</el-menu-item>
                <el-menu-item index="/order6">已退款订单</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
              <el-menu-item index="user">
                <el-icon>
                  <UserFilled />
                </el-icon>
                <span>用户管理</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <!-- 面包屑开始 -->
            <!-- <el-breadcrumb separator="/home">
              <el-breadcrumb-item :to="{ path: 'user' }">用户</el-breadcrumb-item>
              <el-breadcrumb-item>promotion list</el-breadcrumb-item>
              <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
            </el-breadcrumb> -->
            <!-- 面包屑结束 -->
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Menu as IconMenu, Location, UserFilled } from "@element-plus/icons-vue";
</script>

<style scoped lang="scss">
.home {
  height: 100%;

  .el-container {
    height: 100vh;

    .el-header {
      background-image: linear-gradient(#08d9d6, rgb(213, 239, 252));
      height: 60px;
      line-height: 60px;
      position: relative;

      .title {
        text-align: center;
        color: #191919;
      }

      .fr {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        width: 12%;
        justify-content: space-between;
        padding-right: 26px;
        color: #191919;
        font-weight: 600;
      }
    }

    .el-aside {
      background-image: linear-gradient(#08d9d6, rgba(213, 239, 252, 0.6));

      .el-menu {
        height: 100%;
        background-image: linear-gradient(#08d9d6, rgba(213, 239, 252, 0.6));

        .el-menu-item-group {
          background-image: linear-gradient(#08d9d6, rgba(213, 239, 252, 0.6));
        }

        .el-sub-menu .el-sub-menu__title {
          color: red;
        }

        .el-menu-item.is-active {
          background-color: #fff;
        }
      }
    }

    .el-main {
      overflow: hidden;

      .el-breadcrumb {
        margin-bottom: 26px;
      }
    }
  }
}</style>
